<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OrangeMonster</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <link rel="stylesheet" href="css/OrangeMonster.css">
</head>
<body>
    <div class="wrapper">
        <!-- 头部 -->
        <div class="header w clearfix">
            <div class="logo">
                <a href="javascript:;">
                    <img src="img/og_Ms_logo.png" alt="">
                </a>
            </div>

            <div class="search">
                <i class="iconfont">&#xe63d;</i>
                <input type="text" placeholder="Search">
                <button>X</button>
            </div>
        </div>

        <!-- 导航 -->
        <div class="nav w clearfix">
            <ul class="nav1">
                <!-- 三级导航栏 -->
                <li>
                    <a href="javascript:;">Home</a>
                    <ul class="nav2">
                        <li>
                            <a href="javascript:;">二级菜单</a>
                        </li>
                        <ul class="nav3">
                            <li><a href="javascript:;">三级菜单</a></li>
                            <li><a href="javascript:;">三级菜单</a></li>
                            <li><a href="javascript:;">三级菜单</a></li>
                            <li><a href="javascript:;">三级菜单</a></li>
                        </ul>
                    </ul>
                    <ul class="nav2">
                        <li>
                            <a href="javascript:;">二级菜单</a>
                        </li>
                        <ul class="nav3">
                            <li><a href="javascript:;">三级菜单</a></li>
                            <li><a href="javascript:;">三级菜单</a></li>
                            <li><a href="javascript:;">三级菜单</a></li>
                            <li><a href="javascript:;">三级菜单</a></li>
                        </ul>
                    </ul>
                </li>
                <li>
                    <a href="javascript:;">About Us</a>
                </li>
                <li>
                    <a href="javascript:;">Portfolio</a>
                </li>
                <li>
                    <a href="javascript:;">Solutions</a>
                </li>
                <li>
                    <a href="javascript:;">Case Studies</a>
                </li>
                <li>
                    <a href="javascript:;">Get a Quote</a>
                </li>
            </ul>
        </div>

        <!-- 轮播图 -->
        <div class="banner w">
            <div class="scroll">
                <a class="current" href="javascript:;"><img src="img/ogMs_banner.jpg" alt=""></a>
                <a href="javascript:;"><img src="img/ogMs_feat1.png" alt=""></a>
                <a href="javascript:;"><img src="img/ogMs_bg.jpg" alt=""></a>
                <a href="javascript:;"><img src="img/ogMs_feat2.png" alt=""></a>
            </div>

            <!-- 左右箭头 -->
            <div class="prev">&lt;</div>
            <div class="next">&gt;</div>

            <!-- 小圆点 -->
            <div class="dots">
                <a class="active" href="#"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
                <a href="javascript:;"></a>
            </div>
        </div>

        <!-- 三栏布局 -->
        <div class="container w clearfix">
            <div class="we">
                <h2>Welcome to the Orange Monster</h2>
                <p class="p1">Cras et est ac orci convallis lacinia ut vitae</p>
                <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus feugiat, lacus sed adipiscing venenatis, <span>est odio pharetra mi</span>, eu molestie orciurna id lacus. Pellentesque sollicitudin pulvinar est quisaliquam.</p>
                <p class="p2">Cras ac tellus justo, et tincidunt nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames acturpis egestas. <span>Morbi porta vulputate</span> lorem, quis dignissim eros feugiat sit ametl Donec suscipit porttitor leo vel iaculis.</p>
                <p>Class aptent taciti sociosqu ad litora torquent per conubianostra, per inceptos himenaeos. Phasellus feugiat, lacus sed adipiscing venenatis, est odio pharetra mi, eu molestie orciurna id lacus. Pellentesque sollicitudin pulivinar est quis aliquam.</p>
                <a href="javascript:;">Click Me</a>
            </div>
            <div class="im">
                <img src="img/ogMs_feat1.png" alt="">
                <img src="img/ogMs_feat2.png" alt="">
            </div>
            <div class="pe">
                <h2>Pellentesque habitant morbi</h2>
                <p>tristique senectus et netus et malesuada fames ac turpis egestas. Duis arcu enim, ultrices nec mollis commodo,<span>lobortis quis neque</span>. Duis consequat diam eu ipsum volutpat pulvinar. Quisque venenatis laoreet ligula vel ultrices.</p>
                <p class="p3">Aliquam quis eros elit, eget facilisis elit. Quisque sodales,nunc sed sodales blandit, metus justo gravida eros, at facilisis <span>lorem mi ac augue</span>. Nullam sed turpis orci, at dapibus metus. Suspendisse sed venenatis ipsum. Aliquam erat volutpat.</p>
                <h2>onec ornare volutpat molestie.</h2>
                <p>Etiam tortor urna, ultricies id ultrices id; faucibus sit ameturna. Mauris accumsan, risus sit amet rhoncus euismod,velit enim <span>ullamcorper odio</span>, feugiat semper erat sapien sit amet justo. Fusce euismod dictum pretium. Sed venenatisfelis eu ante feugiat pretium?</p>
                <p class="p4">Aliquam quis eros elit, eget facilisis elit. Quisque sodales,nunc sed sodales blandit, metus justo gravida eros, atfacilisis lorem mi ac augue.</p>
            </div>
        </div>

        <div class="bg"></div>
    </div>
    
    <!-- footer -->
    <div class="footer clearfix">
        <div class="w">
            <div class="au">
                <h3>About Us</h3>
                <ul>
                    <li><p>dui vel eros vestibulum</p></li>
                    <li><p>Mauris lectus erat, iaculis</p></li>
                </ul>
            </div>
            <div class="pf">
                <h3>Portfolio</h3>
                <ul>
                    <li><p>dui vel eros vestibulum</p></li>
                    <li><p>Mauris lectus erat, iaculis</p></li>
                    <li><p>Mauris lectus erat, iaculis</p></li>
                </ul>
            </div>
            <div class="su">
                <h3>Solutions</h3>
                <ul>
                    <li><p>dui vel eros vestibulum</p></li>
                    <li><p>Mauris lectus erat, iaculis</p></li>
                    <li><p>Mauris lectus erat, iaculis</p></li>
                </ul>
            </div>
            <div class="cs">
                <h3>Case Studies</h3>
                <ul>
                    <li><p>dui vel eros vestibulum</p></li>
                    <li><p>Mauris lectus erat, iaculis</p></li>
                </ul>
            </div>
            <div class="rd">
                <div>
                    <p><span>@OrangeMonster</span> Praesent non odio vitae sapien congue feugiat a id elit? ln hac habitasse platea dictumst</p>
                    <p><i>11 minutes ago</i>
                    <p><span class="ft">Follow Us on Twitter</span></p>
                </div>
                <img src="img/ogMs_eye.png" alt="">
            </div>
            <p>Copyright 2011@orangemonster.com.au,Orange Monster Development Pty Ltd All Rights Reserved</p>
            <p>Contact Us |Privacy Policy | Get a Quote</p>
        </div>
    </div>

    <script src="js/OrangeMonster.js"></script>
</body>
</html>